<template>
	<view class="d-flex border-top" style="height: 100%;box-sizing: border-box;">
		<scroll-view scroll-y="true" style="flex:1" class="border-right border-light-secondary" :scroll-top="leftTop" scroll-with-animation>
			<view class="border-bottom border-light-secondary scroll-left" v-for="(item,i) in navbar" :key="i" :class="actIndex==i?'class-act bg-light-secondary':''"
			 @click="changindex(i)">
				<view class=" py-1 font-md text-muted text-center">
					{{item.name}}
				</view>
			</view>
		</scroll-view>
		<scroll-view scroll-y="true" style="flex: 3.5;height: 100%;" :scroll-top="rightTop" @scroll="scro" scroll-with-animation>
			<view class="row scroll-right" v-for="(item,i) in navbar" :key="i">
				<view class="span24-8 text-center py-2" v-for="(its,index) in item.list" :key="index">
					<image :src="its.src" style="height: 120rpx; width: 120rpx;"></image>
					<text class="d-block">{{its.name}}</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		onLoad() {
			this.init()
		},
		onReady() {
			const query = uni.createSelectorQuery().in(this);
			query.selectAll('.scroll-right').boundingClientRect(data => {
				// console.log("得到布局位置信息" + JSON.stringify(data));
				let right = data.map(res=>{
					return res.top
				})
				this.cateRitht = right
			})
			query.selectAll('.scroll-left').boundingClientRect(data => {
				// console.log("得到布局位置信息" + JSON.stringify(data));
				let left = data.map(res=>{
					return res.top
				})
				this.cateLeft = left
				// console.log(this.cateLeft)
			}).exec();

		},
		data() {
			return {
				isload: true,
				Top:0,
				topa:0,
				topb:1,
				cateLeft:[],
				cateRitht:[],
				rightTop:0,
				leftTop:0,
				actIndex: 0,
				list: [],
				navbar: [],
			}
		},
		watch:{
			Top(n,o){
				// console.log(n,o)
				if(n-o>=0){
					// 上滑
					if(n<=this.cateRitht[this.topb]){return;}
					if(this.topb+1>=this.cateRitht.length){this.actIndex = this.topb; return;}
					let c = this.topb
					this.topa+=1
					this.topb+=1
					this.actIndex = this.topa
					if(this.actIndex%5!=0 && this.actIndex>5){this.leftTop = this.cateLeft[this.actIndex-2]}
					// console.log(this.topa,this.topb,this.actIndex)
				}else{
					// 下滑
					if(n>=this.cateRitht[this.topb]){return;}
					if(this.topa-1<0){this.actIndex = this.topa; return;}
					let c = this.topb
					this.topa-=1
					this.topb-=1
					this.actIndex = this.topb
					if(this.actIndex-3<=0){this.leftTop = this.cateLeft[0];return;}
					this.leftTop = this.cateLeft[this.actIndex-3]
					// console.log(this.topa,this.topb,this.actIndex)
				}
			
			}
		},
		methods: {
			scro(e) {
				this.Top = e.detail.scrollTop
			},
			changindex(index) {
				if(this.actIndex === index){return;}
							
				this.actIndex = index
				this.rightTop = this.cateRitht[index]
				if(this.actIndex%5!=0 && this.actIndex>5){this.leftTop = this.cateLeft[this.actIndex-4]}
				if(index===0){
					this.topa=0;
					this.topb=1;
					return;
				}
				if(index===this.cateRitht.length-1){
					this.topb=this.cateRitht.length-1;
					this.topa=this.topb-1;
					return;
				}		
				this.topa = index
				this.topb = this.topa+1
		
			},
			init() {
				for (var i = 0; i < 20; i++) {
					let obj = {
						name: "分类" + i
					}
					let list = []
					for (var j = 0; j < 20; j++) {
						let its = {
							src: "/static/imgs/4.png",
							name: i + "-商品·" + j
						}
						list.push(its)
					}
					obj.list = list
					this.navbar.push(obj)
				}
				// console.log(this.navbar)
				this.isload = false
			}
		}
	}
</script>

<style>
	.class-act {
		border-left: 8rpx solid #FD6801;
		color: #FD6801 !important;
	}
</style>
